<div id="sidebar-container">
    <div id="ztree"></div>
<div class="sidebar-shortcuts" id="sidebar-shortcuts">
    <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
        <button class="btn btn-success">
            <i class="ace-icon fa fa-signal"></i>
        </button>

        <button class="btn btn-info">
            <i class="ace-icon fa fa-pencil"></i>
        </button>

        <button class="btn btn-warning">
            <i class="ace-icon fa fa-users"></i>
        </button>

        <button class="btn btn-danger">
            <i class="ace-icon fa fa-cogs"></i>
        </button>
    </div>

    <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
        <span class="btn btn-success"></span>

        <span class="btn btn-info"></span>

        <span class="btn btn-warning"></span>

        <span class="btn btn-danger"></span>
    </div>
</div><!-- /.sidebar-shortcuts -->

<ul class="nav nav-list" id="sidebar-menu">
    <li data-level="1" v-for="node in sideNodes" @click="changeArrow(node)">
        <a href="javascript:void(0);" class="dropdown-toggle" :haschild="node.children.length > 0?'true':'false'">
            <i class="menu-icon fa fa-user"></i>
            <span class="menu-text"
                  style="vertical-align: middle;"> {{node.name}} </span>
            <b :class="node.arrow?'arrow fa fa-angle-up':'arrow fa fa-angle-down'"></b>
        </a>
        <b class="arrow"></b>

        <ul class="submenu nav-hide" style="display:none;" v-if="node.children.length > 0" >
            <li data-level="2" v-for="c in node.children">

                <a
                        :href="c.url"
                        id="menu_manageruserCenter"
                        haschild="false"
                >
                    <i class="menu-icon fa fa-file-o"></i>
                    <span class="menu-text"
                    > {{c.name}} </span>
                </a>
                <b class="arrow"></b>

            </li>
        </ul>
    </li>
</ul><!-- /.nav-list -->
<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
    <i class="ace-icon fa fa-angle-double-left" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
</div>
</div>
<script>
    let v = new Vue({
        el:'#sidebar-container',
        data:function () {
            return {
                settings:{
                    data:{
                        simpleData: {
                            enable:true,
                            pIdKey:'parentId'
                        }
                    },
                },
                sideNodes:[],
            }
        },
        methods:{
            initSideMenu:function () {
                let loginUser = JSON.parse(sessionStorage.getItem("loginUser"));
                axios({
                    url:'manager/resource/selectByUid',
                    params:{uid:loginUser.id}
                }).then(resp => {
                    // console.log(resp.data.obj);
                    let treeObj = $.fn.zTree.init($("#ztree"),this.settings,resp.data.obj);
                    this.sideNodes = treeObj.getNodes();
                    for (let i in this.sideNodes) {
                        Vue.set(this.sideNodes[i],'arrow',false);
                    }
                    treeObj.destroy();
                    console.log(this.sideNodes);
                }).catch(error => {
                    layer.msg(error.message);
                })
            },
            // initSideMenu:function () {
            //     let loginUser = JSON.parse(sessionStorage.getItem("loginUser"));
            //     axios({
            //         url:'manager/resource/selectByUid',
            //         params:{uid:loginUser.id}
            //     }).then(resp => {
            //         // console.log(resp.data.obj);
            //         let treeObj = $.fn.zTree.init($("#ztree"),this.settings,resp.data.obj);
            //         this.sideNodes = treeObj.getNodes();
            //         for (let i in this.sideNodes) {
            //             Vue.set(this.sideNodes[i],'arrow',false);
            //         }
            //         treeObj.destroy();
            //         console.log(this.sideNodes);
            //     }).catch(error => {
            //         layer.msg(error.message);
            //     })
            // },
            changeArrow:function (obj) {
                console.log(obj);
                obj.arrow = !obj.arrow;
            }
        },
        created:function () {
            this.initSideMenu();
        }
    })
</script>
